<template>
  <view class="container">
    <z-paging
      ref="paging"
      v-model="itemList[0]"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无订单数据~"
      :empty-view-img-style="imgStyle"
    >
      <view slot="top">
        <u-navbar height="50" title="选择商品" title-size="36" title-color="#333"></u-navbar>
        <!-- <view class="">
					<u-search placeholder="请输入搜索商品关键字" v-model="keyword"></u-search>
				</view>	 -->
        <!-- <view class="tabsView">
					<u-tabs-swiper ref="uTabs" :list="tabsList" :current="current" @change="tabsChange"
						:is-scroll="false" :show-bar="false" active-color="#0F76BC" swiper-width="750">
					</u-tabs-swiper>
				</view> -->
        <u-gap height="20" bg-color="#F0F1F2"></u-gap>
      </view>

      <view class="view-area">
        <view class="goods-list-box" v-for="(item, index) in itemList[0]" :key="index">
          <view class="gods-img-box">
            <image class="goods-img" :src="item.picUrl" mode=""></image>
          </view>
          <view class="goods-dsce">
            <view class="goods-title-tip">
              <text>{{ item.name }}</text>
            </view>
            <view class="goods-price-info">
              <text class="price_main">¥{{ (item.price * 0.01).toFixed(2) }}</text>
              <button v-if="action" @click="check(item)">选择商品</button>
              <button v-else @click="bind(item)">选择关联</button>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
    <u-popup v-model="show" mode="center" width="680rpx" height="550rpx" border-radius="15">
      <view class="popup-box" style="position: relative; height: 545rpx; padding: 15rpx">
        <view style="display: flex; width: 100%; margin-bottom: 10rpx">
          <view class="col"> 图片 </view>
          <view class="col"> 规格 </view>
          <view class="col"> 价格 </view>
          <view class="col"> 库存 </view>
          <view class="col"> 操作 </view>
        </view>
        <view
          style="display: flex; width: 100%"
          v-for="(item, index) in goodsInfo.skus"
          :key="index"
        >
          <u-icon class="col" :name="item.picUrl" size="80"></u-icon>
          <view class="col">
            {{ item.properties[0].valueName }}
          </view>
          <view class="col">
            {{ item.price }}
          </view>
          <view class="col">
            {{ item.stock }}
          </view>
          <view
            :style="isCheck(item.id) ? 'background-color: #999999' : ''"
            @click="checkConfirm(item)"
            class="col chect-btn"
          >
            选中
          </view>
        </view>
        <view class="" style="position: absolute; bottom: 10rpx">
          <view @click="confirm" class="submit-btn" style="width: 550rpx; height: 70rpx">
            确认选中
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      goodsId: '',
      goodsInfo: {
        skus: []
      },
      actionGoods: [],
      imgStyle: {
        width: '12rem'
      },
      scurrent: 0,
      itemList: [[{}, {}], [], []],
      order_id: '',
      action: 0
    }
  },
  onLoad(res) {
    if (res.action) {
      this.action = 1
    }
    this.queryList()
  },
  computed: {
    isCheck() {
      return (e) => {
        for (let item of this.actionGoods) {
          if (item.skuId == e) {
            return true
          }
        }
        return false
      }
    }
  },
  methods: {
    queryList(pageNo = 1, pageSize = 10) {
      this.$u
        .get('/app-api/vlog/info/get-related-me-product-page', {
          pageNo,
          pageSize
        })
        .then((res) => {
          let daynamicPaging = this.tabsList > 0 ? 'paging' + this.current : 'paging'
          this.$refs[daynamicPaging].complete(res.data.list)
        })
    },

    check(e) {
      this.goodsId = e.id
      this.$u.get('/app-api/product/spu/get-detail?id=' + e.id).then((res) => {
        this.goodsInfo = res.data
      })
      this.show = true
    },

    checkConfirm(e) {
      for (let i = 0; i < this.actionGoods.length; i++) {
        if (e.id == this.actionGoods[i].skuId) {
          this.actionGoods.splice(i, 1)
          return
        }
      }

      this.actionGoods.push({
        spuId: this.goodsId,
        skuId: e.id
      })
    },
    onResellPush(item) {
      this.$utils.route({
        url: '/goods/resell-push/resell-push',
        params: {
          id: item.id
        }
      })
    },
    onPushComment(item) {
      this.$utils.route({
        url: '/other/push-comment/push-comment',
        params: {
          id: item.id
        }
      })
    },

    bind(e) {
      uni.$emit('goodsInfo', e)
      uni.navigateBack()
    },

    confirm() {
      if (this.actionGoods.length == 0) {
        return this.$u.toast('请选择参与的商品')
      }
      console.log(this.actionGoods)
      uni.$emit('goodsInfo', this.actionGoods)
      uni.navigateBack()
    }
  }
}
</script>

<style scoped>
@import url('../../style/btn.css');
page {
}
.goods-list-box {
  display: flex;
  height: 200rpx;
  background-color: #ffffff;
  padding: 20rpx;
  margin-bottom: 12rpx;
  border-bottom: 2rpx solid #ededed;
}

.goods-img-box {
  flex: 3;
  width: 230rpx;
  padding: 30rpx;
}
.goods-img {
  width: 160rpx;
  height: 160rpx;
}
.goods-dsce {
  flex: 7;
  display: flex;
  flex-direction: column;
  margin-left: 20rpx;
}
.goods-title-tip {
  flex: 7;
}

.goods-price-info {
  display: flex;
  margin-top: 50rpx;
}

.price_main {
  flex: 1;
  font-size: 26rpx;
  color: #ff3636;
}

.goods-price-info button {
  font-size: 24rpx;
  height: 50rpx;
  line-height: 50rpx;
  border-radius: 30rpx;
  background-color: #0f76bc;
  color: #ffffff;
}

.goods_price {
  flex: 3;
  font-size: 25rpx;
  color: red;
  display: flex;
}
.price_tip {
  font-size: 20rpx;
}

.price_dot {
  font-size: 30rpx;
  align-self: flex-end;
}

.goods_old_price {
  color: #89898a;
  text-decoration: line-through;
}

.popup-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.col {
  flex: 1;
  text-align: center;
}

.chect-btn {
  width: 50rpx;
  height: 50rpx;
  background-color: #0f76bc;
  color: #fff;
  line-height: 50rpx;
  text-align: center;
}
</style>
